<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--stylesheet css-->
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../css/self-green.css">

    <!--JavaScript js-->
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!--背景图片轮播效果所必须引入的文件-->
    <script src="../js/jquery.backstretch.min.js"></script>
    <script src="../js/self-custom.js"></script>

    <!--fonts在服务器中显示未被引入，报了404错误-->
    <!--解决字体图标不显示的问题-->
    <style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('../font/glyphicons-halflings-regular.eot');
            src: url('../font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
                 url('../font/glyphicons-halflings-regular.woff') format('woff'),
                 url('../font/glyphicons-halflings-regular.ttf') format('truetype'),
                 url('../font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
        }
    </style>
</head>
<body>

<!--头部分-->
<div class="container text-center" id="header">
    <img src="../images/photo.jpg" class="img-circle img-thumbnail">
    <hr width="10%">
    <h1 style="color: #7ac143">Hi,I am vivian</h1>
    <h1 style="color: white">Creative Director</h1>
</div>

<!--身体：第一部分-->
<div class="container" id="partOne">
    <div class="row">
        <!--左边-->
        <div class="col-md-6 col-sm-12" id="partOne-left">
            <div id="partOne-left-border">
                <h2 id="partOne-left-h2">Easy Profile</h2>
                <h1 id="partOne-left-h1">Bootstrap v3.3.5</h1>
                <p>
                    This easy HTML profile is brought to you by templatemo website.
                    There are 4 color themes, <a href="index-green.html">Green</a>,
                    <a href="#">Blue</a>,
                    <a href="#">Gray</a>, and
                    <a href="#">Orange</a>.
                    Sed vitae dui in neque elementum tempor eu id risus.
                    Phasellus sed facilisis lacus, et venenatis augue.
                </p>
            </div>
        </div>
        <!--右边-->
        <div class="col-md-6 col-sm-12" id="partOne-right">
            <div id="partOne-right-border">
                <h1 style="color: white;" id="partOne-right-h1">Skills</h1>
                <div style="color: white" class="partOne-right-msg">
                    PHP MySQL<span class="pull-right">70%</span>
                    <div class="progress"style="height: 5px">
                        <div style="width: 70%" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </div>
                <div style="color: white" class="partOne-right-msg">
                    UI/UX Design<span class="pull-right">85%</span>
                    <div class="progress"style="height: 5px">
                        <div style="width: 85%" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </div>
                <div style="color: white" class="partOne-right-msg">
                    Bootstrap<span class="pull-right">95%</span>
                    <div class="progress"style="height: 5px">
                        <div style="width: 95%" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--身体：第二部分-->
<div class="container" id="partTwo">
    <div class="row">
        <!--左边-->
        <div class="col-md-8 col-sm-12" id="partTwo-left">
            <div id="partTwo-left-border">
                <h1 style="color: white">Education</h1>
                <h3 style="color: #308030">New Web Design</h3>
                <h4 style="color: white">School of Media &nbsp;&nbsp;&nbsp;&nbsp;2030 January - 2034 December</h4>
                <p>
                    In lacinia leo sed quam feugiat, ac efficitur dui tristique.
                    Ut venenatis, odio quis cursus egestas, nulla sem volutpat diam,
                    ac dapibus nisl ipsum ut ipsum. Nunc tincidunt libero non magna placerat elementum.
                </p>
            </div>
        </div>
        <!--右边-->
        <div class="col-md-4 col-sm-12" id="partTwo-right">
            <div id="partTwo-right-border">
                <h1>Languages</h1>
                <ul>
                    <li>Myanmar / Thai</li>
                    <li>English / Spanish</li>
                    <li>Chinese / Japanese</li>
                    <li>Arabic / Hebrew</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--身体：第三部分-->
<div class="container" id="partThree">
    <div class="row">
        <!--左边-->
        <div class="col-md-4 col-sm-12" id="partThree-left">
            <div id="partThree-left-border">
                <h1>Contact</h1>
                <p id="partTwo-left-msg">
                    <span class="glyphicon glyphicon-map-marker"></span>
                    123 Rama IX Road, Bangkok
                </p>
                <p>
                    <span class="glyphicon glyphicon-earphone"></span>
                    010-020-0890
                </p>
                <p>
                    <span class="glyphicon glyphicon-envelope"></span>
                    easy@company.com
                </p>
                <p>
                    <span class="glyphicon glyphicon-globe"></span>
                    www.company.com
                </p>
            </div>
        </div>
        <!--右边-->
        <div class="col-md-8 col-sm-12" id="partThree-right">
            <div id="partThree-right-border">
                <h1 style="color: white">Experiences</h1>
                <h3 style="color: #308030">Website Development</h3>
                <h4 style="color: white">New Media Company&nbsp;&nbsp;&nbsp;&nbsp; 2035 January - 2036 April</h4>
                <p>
                    Cras porta tincidunt sem, in sollicitudin lorem efficitur ut.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet.
                </p>
            </div>
        </div>
    </div>
</div>

<!--底部（版权）-->
<div class="container" id="footer">
    <div class="text-center">
        <P style="color: white">
            Copyright © 2015.Company name All rights reserved.<a href="#">网页模板</a>
        </P>
    </div>
</div>

</body>
</html>